<template>
  <Card
    :bordered="false"
    :padding="0"
    dis-hover
    class="ivu-mt ivu-pb30 my-iCrud-container"
    ref="card"
  >
    <i-crud
      ref="standardIcrud"
      :form-options="{ ...iCrudOptions.formOptions, type: modelType }"
      :page-options="{ ...iCrudOptions.pageOptions, total: total }"
      :search-options="iCrudOptions.searchOptions"
      :border="iCrudOptions.border"
      :selection-row="selectionRowOptions"
      :data="list"
      :columns="columnsTable"
      :fetch-data="getApiTableList"
      :fetch-create="createTableApi"
      :fetch-edit="editTableApi"
      :fetch-remove="deleteTableApi"
      :fetch-batch-remove="delMultipleTableApi"
      @on-selection-change="setCheckedItem"
      :add-form-options="addFormOptions"
    >
      <template v-slot:actions>
        <PermissionBtn
          title="新增"
          :btn-info="{ icon: 'md-add', type: 'primary' }"
          @click="handleShowCreateDialog"
          authority="lab:labInspectionStandard:edit"
        />
        <PermissionBtn
          title="升级"
          :btn-info="{ icon: 'md-arrow-round-up', type: 'success' }"
          :selectItems="selectItems"
          isSelect="multiple"
          :correctFn="correctFn"
          :callback="upgradeMore"
          authority="lab:labInspectionStandard:edit"
        />
        <PermissionBtn
          title="上传"
          :btn-info="{ icon: 'ios-cloud-upload', type: 'success' }"
        />
      </template>

      <template #standardTypeTpl="{ row, column, index }">
        <span>{{ dictTrans(row.standardType, "standardType") }}</span>
      </template>
      <template #standardStatusTpl="{ row, column, index }">
        <span>{{ dictTrans(row.standardStatus, "standardStatus") }}</span>
      </template>
      <template #languageTypeTpl="{ row, column, index }">
        <span>{{ dictTrans(row.languageType, "languageType") }}</span>
      </template>
      <template #operOptions="{ row, column, index }">
        <div @click.stop.prevent>
          <PermissionBtn
            title="查看"
            :btn-info="{ icon: 'md-eye' }"
            type="text"
            @click="handleShowViewDialog(row, column, index)"
            authority="lab:labInspectionStandard:view"
            :is-divider="false"
          />
          <PermissionBtn
            title="修改"
            :btn-info="{ icon: 'md-create' }"
            type="text"
            @click="handleShowEditDialog(row, column, index)"
            authority="lab:labInspectionStandard:edit"
          />
          <PermissionBtn
            v-if="row.standardStatus == 0"
            title="升级"
            :btn-info="{ icon: 'md-arrow-round-up' }"
            type="text"
            @click="onUpgrade(row, column, index)"
            authority="lab:labInspectionStandard:edit"
          />
          <PermissionBtn
            v-if="row.standardStatus == 1"
            title="正常"
            :btn-info="{ icon: 'md-arrow-round-up' }"
            type="text"
            @click="onUpdateNormal(row, column, index)"
            authority="lab:labInspectionStandard:edit"
          />
        </div>
      </template>
    </i-crud>
  </Card>
</template>

<script lang="ts">
import { defineComponent, ref, watch, nextTick, reactive } from "vue";
import {
  getPage,
  onSave,
  upgrade,
  updateNormal,
} from "@api/baseData/testStandard";
import util from "@/libs/util";
import getColumns from "./index";
import PermissionBtn from "@/components/permission-btn";
import {
  useCreateTable,
  useEditTable,
  useRowSelect,
  useTableList,
} from "@/hooks";
import { Message, Modal } from "view-ui-plus";
import { getDictionary } from "@/api/common";

export default defineComponent({
  components: { PermissionBtn },
  setup() {
    const addFormOptions = { show: false };
    // ref
    const standardIcrud = ref<HTMLElement>();
    // option配置
    const iCrudOptions = util.env.iCrudOptions;
    // 列表数据
    const list = ref<any>([]);

    const modelType = ref("Modal");

    const columns = getColumns();
    // 列表配置
    const columnsTable = ref(columns);
    // 跨页多选
    const selectionRowOptions = {
      selectKey: "id", // 跨页多选的参考字段，数据唯一
      // batchRemove: util.env.iCrudOptions.selectionRowOptions.batchRemove, //删除按钮样式
      batchRemove: { show: false },
    };

    const dicts = reactive({
      languageType: [],
      standardStatus: [],
      standardType: [],
    });

    const getDictionaryFn = (dictType, name) => {
      getDictionary({ dictType }).then((res) => {
        dicts[name] = res;
      });
    };

    getDictionaryFn("language_type", "languageType");
    getDictionaryFn("standard_status", "standardStatus");
    getDictionaryFn("standard_type", "standardType");

    const dictTrans = (value, name) => {
      const item = dicts[name].find((item) => item.dictValue == value);
      if (item) {
        return item.dictLabel;
      }
    };

    const currentRow = ref({});

    const { selectItems, setCheckedItem } = useRowSelect();

    const { getApiTableList, total } = useTableList(getPage, list);

    const { createTableApi } = useCreateTable(onSave);

    const { editTableApi } = useEditTable(currentRow, onSave, (params) => {
      const columns = getColumns();
      columnsTable.value = columns;
      return params;
    });

    const handleShowCreateDialog = () => {
      modelType.value = "Modal";
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowAddDialog();
    };

    const handleShowViewDialog = (row, column, index) => {
      modelType.value = "Drawer";
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowViewDialog({ row, column, index });
    };

    // 删除操作
    const deleteTableApi = () => {
      return new Promise((resolve, reject) => {});
    };
    // 多选删除
    const delMultipleTableApi = (selectRow) => {
      return new Promise((resolve, reject) => {});
    };

    // 编辑按钮
    const handleShowEditDialog = (row: any, column: any, index: number) => {
      modelType.value = "Modal";
      currentRow.value = row;
      const columns = getColumns((currentRow.value as any).id);
      columnsTable.value = columns;
      nextTick(() => {
        const icrudRefs: any = standardIcrud.value;
        icrudRefs.handleShowEditDialog({ row, column, index });
      });
    };
    // 删除按钮
    const handleShowRemoveDialog = (row: any, column: any, index: number) => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowRemoveDialog({ row, column, index });
    };

    const onUpgrade = (row: any, column: any, index: number) => {
      Modal.confirm({
        title: "确定升级吗?",
        onOk: () => {
          upgrade(row.id).then((res: any) => {
            const icrudRefs: any = standardIcrud.value;
            icrudRefs.handleFetchData();
          });
        },
      });
    };

    const upgradeMore = (items: any) => {
      return new Promise((resolve, reject) => {
        let ids = items.map((item) => item.id).join(",");
        upgrade(ids).then((res: any) => {
          const icrudRefs: any = standardIcrud.value;
          icrudRefs.handleFetchData();
        });
      });
    };

    const onUpdateNormal = (row: any, column: any, index: number) => {
      Modal.confirm({
        title: "确定恢复正常吗?",
        onOk: () => {
          updateNormal(row.id).then((res: any) => {
            const icrudRefs: any = standardIcrud.value;
            icrudRefs.handleFetchData();
          });
        },
      });
    };

    const correctFn = () => {
      return new Promise((resolve, reject) => {
        const items = selectItems.value;
        for (let index = 0; index < items.length; index++) {
          const ele = items[index];
          if (ele.standardStatus == 1) {
            Message.warning("选择的数据有误");
            reject();
            return;
          }
        }
        resolve(true);
      });
    };

    //刷新数据
    return {
      handleShowEditDialog,
      handleShowRemoveDialog,
      standardIcrud,
      iCrudOptions,
      selectionRowOptions,
      list,
      columnsTable,
      getApiTableList,
      createTableApi,
      editTableApi,
      deleteTableApi,
      delMultipleTableApi,
      setCheckedItem,
      handleShowViewDialog,
      handleShowCreateDialog,
      onUpgrade,
      onUpdateNormal,
      selectItems,
      correctFn,
      upgradeMore,
      dictTrans,
      total,
      addFormOptions,
      modelType,
    };
  },
});
</script>

<style scoped lang="less">
/deep/.i-crud-body {
  padding: 16px;
}
</style>
